import React from "react";
import styles from "./index.module.scss";
import { NavBar } from "antd-mobile";
export default function index() {
  return (
    <div>
      <NavBar
        style={{
          "--height": "36px",
          "--border-bottom": "1px #eee solid",
          backgroundColor: "white",
          position: "fixed",
          width: "100%",
          left: "0",
          top: "0",
        }}
      >
        找书单
      </NavBar>
      <ul className={styles.bookList}>
        <li>
          <img src="src\images\touxiang01.jpg" alt="" />
          <div>
            <p>把阿三大撒大青蛙青蛙青蛙大全</p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Perferendis neque praesentium ex alias maiores excepturi laborum
              enim sapiente aperiam, ullam corporis doloribus perspiciatis
              recusandae rem placeat quo? Quisquam, aliquid officia.
            </p>
            <div>
              <img src="src\images\touxiang01.jpg" alt="" />
              <span>糖糖——甜甜</span>
            </div>
          </div>
        </li>
        <li>
          <img src="src\images\touxiang01.jpg" alt="" />
          <div>
            <p>把阿三大撒大青蛙青蛙青蛙大全</p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Perferendis neque praesentium ex alias maiores excepturi laborum
              enim sapiente aperiam, ullam corporis doloribus perspiciatis
              recusandae rem placeat quo? Quisquam, aliquid officia.
            </p>
            <div>
              <img src="src\images\touxiang01.jpg" alt="" />
              <span>糖糖——甜甜</span>
            </div>
          </div>
        </li>
        <li>
          <img src="src\images\touxiang01.jpg" alt="" />
          <div>
            <p>把阿三大撒大青蛙青蛙青蛙大全</p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Perferendis neque praesentium ex alias maiores excepturi laborum
              enim sapiente aperiam, ullam corporis doloribus perspiciatis
              recusandae rem placeat quo? Quisquam, aliquid officia.
            </p>
            <div>
              <img src="src\images\touxiang01.jpg" alt="" />
              <span>糖糖——甜甜</span>
            </div>
          </div>
        </li>
        <li>
          <img src="src\images\touxiang01.jpg" alt="" />
          <div>
            <p>把阿三大撒大青蛙青蛙青蛙大全</p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Perferendis neque praesentium ex alias maiores excepturi laborum
              enim sapiente aperiam, ullam corporis doloribus perspiciatis
              recusandae rem placeat quo? Quisquam, aliquid officia.
            </p>
            <div>
              <img src="src\images\touxiang01.jpg" alt="" />
              <span>糖糖——甜甜</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  );
}
